<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="my-table">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td>44</td>
        <td>55</td>
        <td>66</td>
    </tr>
</table>
</body>
<script>
    var myTable = document.getElementById('my-table');

    myTable.onclick = function (e) {
        // 处理浏览器兼容
        e = e || window.event;
        var targetNode = e.target || e.srcElement;

        // 测试如果点击的是TR就触发
        if (targetNode.nodeName.toLowerCase() === 'td') {
            alert('You clicked a table row!');
        }
    }
</script>
</html>